<template>
  <div class="detailContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <div class="title">
            <span class="name">{{ detailData.name }}</span>
            <span class="id">{{ detailData.id }}</span>
          </div>
          <div class="detailInfo">
            <div class="createInfo">
              <span style="font-size: 15px"
                >创建人：<span style="font-size: 14px; color: #969696">{{
                  detailData.creator
                }}</span></span
              >
              <span style="font-size: 15px; margin-left: 20px"
                >创建时间：<span style="font-size: 14px; color: #969696">{{
                  detailData.createTime
                }}</span></span
              >
            </div>
            <div class="updateInfo">
              <span style="font-size: 15px"
                >更新人：<span style="font-size: 14px; color: #969696">{{
                  detailData.updater
                }}</span></span
              >
              <span style="font-size: 15px; margin-left: 20px"
                >更新时间：<span style="font-size: 14px; color: #969696">{{
                  detailData.updateTime
                }}</span></span
              >
            </div>
          </div>
          <div class="buttonGroup" style="margin-top: 20px">
            <el-button type="primary" plain style="width: 80px">编辑</el-button>
            <el-button type="primary" plain style="width: 80px">删除</el-button>
          </div>
        </el-card>
        <el-card style="margin-top: 20px">
          <template #header>
            <span style="font-size: 16px">基础信息</span>
          </template>
          <div class="basicBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-descriptions
                style="margin-top: 40px; width: 100%"
                column="2"
                label-width="120"
              >
                <el-descriptions-item label="仓库名称">{{
                  detailData.name
                }}</el-descriptions-item>
                <el-descriptions-item label="仓库编号">{{
                  detailData.id
                }}</el-descriptions-item>
                <el-descriptions-item label="位置">{{
                  detailData.location
                }}</el-descriptions-item>
                <el-descriptions-item label="面积">{{
                  detailData.area
                }}</el-descriptions-item>
                <el-descriptions-item label="负责人">{{
                  detailData.leader
                }}</el-descriptions-item>
                <el-descriptions-item label="库区数量">{{
                  detailData.num
                }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{
                  detailData.remark
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="warehouseContainer">
              <div class="milestone">
                <div class="milestone-content">库区信息</div>
              </div>
              <el-table border style="margin-top: 40px" :data="tableData">
                <el-table-column
                  align="center"
                  type="index"
                  label="序号"
                  width="60"
                ></el-table-column>
                <el-table-column align="center" label="库区名称" width="90">
                </el-table-column>
                <el-table-column align="center" label="库存编号" width="90">
                </el-table-column>
                <el-table-column align="center" label="面积"> </el-table-column>
                <el-table-column align="center" label="库区数量" width="90">
                </el-table-column>
                <el-table-column align="center" label="备注"> </el-table-column>
                <el-table-column align="center" label="操作" width="200">
                  <template #default>
                    <el-button link type="primary">查看库位</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
const $router = useRouter();

//mockData
let detailData = ref({
  name: "新产品仓库",
  id: "CKBH20262251548",
  creator: "李小海",
  createTime: "2025-06-26 14:56:06",
  updater: "李小海",
  updateTime: "2025-06-26 14:56:06",
  location: "南区",
  area: "500",
  num: "60",
  remark: "",
  leader: "赵子龙",
});
let tableData = ref([{}]);
const isFooterVisible = ref(false);
const close = () => {
  $router.replace("/storage/store/setting");
};
onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
});
</script>

<style scoped lang="scss">
.detailContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .title {
    .name {
      font-weight: bold;
      font-size: 18px;
    }
    .id {
      color: #969696;
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .detailInfo {
    margin-top: 10px;
    display: flex;
  }
  .updateInfo {
    margin-left: 40px;
  }
  .basicBody {
    width: 100%;
    .basicInfoContainer,
    .warehouseContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .warehouseContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>